import { ThemeVarService } from '../../../../lib/abstract/style/theme_var/service'

/**
 * 输入框样式服务类
 */
export class InputStylesService {
  private static instance: InputStylesService
  private readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()

  static getInstance(): InputStylesService {
    if (!InputStylesService.instance) {
      InputStylesService.instance = new InputStylesService()
    }

    return InputStylesService.instance
  }

  get default(): string {
    return `
    background-color: var(${this.themeVarService.input.default.background}) !important;
    border: 1px solid var(${this.themeVarService.input.default.border}) !important;
    color: ${this.themeVarService.input.default.color} !important;
    caret-color: ${this.themeVarService.input.default.caret} !important;
    padding: 6px 0.5em !important;
    font-size: 14px !important;
    margin: 12px 0 !important;
    border-radius: 4px;

    &:hover {
      border-color: var(${this.themeVarService.input.default.borderHover}) !important;
    }
    
    &:focus {
      outline: none !important;
    }
    
    &::placeholder {
      color: #6c757d !important;
      opacity: 1 !important;
    }
  `
  }
}
